<template>
  <div class="chat-tools w-full h-full flex flex-col">
    <div class="flex-1">
      <textarea v-model.trim="msgContent" class="w-full h-full p-10px"></textarea>
    </div>
    <div class="w-full p8px flex justify-between items-center" border="t t-solid #efeff4">
      <div>
        <n-button size="small" quaternary>
          <template #icon>
            <n-icon :size="26"><Image24Regular></Image24Regular></n-icon>
          </template> </n-button><n-button size="small" quaternary>
          <template #icon>
            <n-icon :size="26"><Folder24Regular></Folder24Regular></n-icon>
          </template>
        </n-button>
      </div>
      <div><n-button size="small" type="primary" @click="submitMsg">发送</n-button></div>
    </div>
  </div>
</template>

<script setup>
import { Folder24Regular, Image24Regular } from '@/components/app-icons/index.js';
import { ref } from 'vue';

const emits = defineEmits(['submitMsg']);
const msgContent = ref('');
function submitMsg() {
  if (!msgContent.value) return $message.warning('请输入内容');
  emits('submitMsg', msgContent.value);
  msgContent.value = '';
}
</script>

<style lang="scss">
.chat-tools {
  .n-input.n-input--textarea {
    border-radius: 0;
    .n-input--textarea-el {
      resize: none !important;
    }
  }
}
</style>
